<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片（相册）展示设计Ⅴ</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- 第一组图片，需要三组，格式相同 -->
<figure class="sample">
  <figcaption>
    <h2>Afternoon Tea</h2>
    <p>Afternoon tea is one of the ways of dining.</p>
  </figcaption>
  <a href="#"></a><img src="https://source.unsplash.com/LVAAnfAR2lE" alt="sample1" />
</figure>   

<!-- 第二组图片 -->
<figure class="sample hover">
  <figcaption>
    <h2>Noodle</h2>
    <p>Thai Red Curry Noodle Soup with Chicken.</p>
  </figcaption>
  <a href="#"></a><img src="https://source.unsplash.com/YpfRCe5lda0" alt="sample2" />
</figure>

<!-- 第三组图片 -->
<figure class="sample">
  <figcaption>
    <h2>Sushi</h2>
    <p>Sushi plate with chopsticks and soya souce.</p>
  </figcaption>
  <a href="#"></a><img src="https://source.unsplash.com/iy_MT2ifklc" alt="sample3" />
</figure>

<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script><script src="./script.js"></script>
</body>
</html>